<template>
  <div class="dialog-view">
    <div class="dialog-box">
      <div class="header">
        <div class="title">设备信息</div>
        <i class="el-icon-close" @click="closeEvent"></i>
      </div>
      <div class="content">
        <div class="info-module">基础信息</div>
        <table>
          <tr>
            <td class="tdHead">设备名称</td>
            <td>设备名称设备名称设备名称</td>
            <td class="tdHead">产品型号</td>
            <td>GAS GAS 2020</td>
          </tr>
          <tr>
            <td class="tdHead">序列号(SN)</td>
            <td>AJOW-FEWF2020 <span v-copy="'AJOW-FEWF2020'">复制</span></td>
            <td class="tdHead">MAC码</td>
            <td>GAS GAS 2020</td>
          </tr>
          <tr>
            <td class="tdHead">IP地址</td>
            <td>GAS GAS 2020</td>
            <td class="tdHead">CPU</td>
            <td>GAS GAS 2020</td>
          </tr>
          <tr>
            <td class="tdHead">内存</td>
            <td>8GB</td>
            <td class="tdHead">设备状态</td>
            <td>正常</td>
          </tr>
          <tr>
            <td class="tdHead">运行时间</td>
            <td>1230小时</td>
            <td class="tdHead"></td>
          </tr>
        </table>

        <div class="info-module">硬件信息</div>
        <table>
          <tr>
            <td class="tdHead">序列号(SN)</td>
            <td>设备名称设备名称设备名称 <span v-copy="'设备名称设备名称设备名称'">复制</span></td>
            <td class="tdHead">硬盘状态</td>
            <td>正常</td>
          </tr>
          <tr>
            <td class="tdHead">硬盘型号</td>
            <td>AJOW-FEWF2020</td>
            <td class="tdHead">硬盘容量</td>
            <td>128GB</td>
          </tr>
        </table>
      </div>
      <div class="footer">
        <el-button type="primary" size="mini" @click="confirmEvent">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  mounted() {
    this.stopMove()
  },
  beforeDestroy() {
    this.move()
  },
  methods: {
    closeEvent() {
      this.$emit('closeEvent')
    },
    confirmEvent() {
      this.$emit('closeEvent')
    },
    stopMove(){
      let m = function(e){e.preventDefault();};
      document.body.style.overflow='hidden';
      document.addEventListener("touchmove",m,{ passive:false });//禁止页面滑动
    },
    move(){
      let m =function(e){e.preventDefault();};
      document.body.style.overflow='';//出现滚动条
      document.removeEventListener("touchmove",m,{ passive:true });
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-view {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .dialog-box {
    position: relative;
    width: 688px;
    background-color: #fff;
    box-shadow: 0px 3px 10px rgb(222, 221, 221);
    border-radius: 4px;
    overflow: hidden;
    .header {
      height: 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      background-color: #edeef3;
      .title {
        font-size: 14px;
        font-weight: bold;
        color: #152640;
      }
      i {
        font-size: 18px;
        cursor: pointer;
      }
    }
    .content {
      padding: 20px 30px;
      .info-module{
        font-size: 13px;
        color: #354968;
        margin-bottom: 10px;
      }
      table{
        border: 1px solid #E8EBEF;
        border-collapse: collapse;
        border-spacing: 0;
        background-color: transparent;
        display: table;
        width: 100%;
        margin-bottom: 20px;
        td{
          text-align: left;
          vertical-align: middle;
          padding: 0;
          padding-left: 15px;
          width: 224px;
          height: 35px;
          border: 1px solid #E8EBEF;
          font-size: 10px;
          color: #58657A;
          span{
            color: #3561F6;
            margin: 0 10px;
            cursor: pointer;
          }
        }
      }
      .tdHead{
        color: #AFAFB3;
        width: 90px;
      }
    }
    .footer{
      // position: absolute;
      // left: 0;
      // bottom: 0;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      padding: 20px 30px;
      background-color: #fff;
    }
  }
  
}
</style>